<template>
	<!-- 20230201 -->
	<view class="mall-evaluate-cn">
		<!-- 组件内容 -->
		<view class="cn-content">

			<view class="padding-lr-30 padding-top-30 padding-bottom-10 bg-ff">

				<view class="flex align-center">
					<!-- 头像 -->
					<image class="jc-avatar-80" mode="aspectFill" :src="evaluateData.user_head_img"></image>

					<view class="margin-left-15 flex-one">
						<!-- 昵称 -->
						<view class="text-26 text-4d">{{evaluateData.user_nick_name}}</view>
						<!-- 时间和规格 -->
						<view class="margin-top-10 text-26 text-aa text-cut-one">
							<text>{{evaluateData.show_create_time}}</text>
							<text class="margin-left-20 flex-one" v-if="evaluateData.product_sku_name">
								规格:{{evaluateData.product_sku_name}}
							</text>
						</view>
					</view>
				</view>

				<!-- 评论内容 -->
				<view class="margin-top-30 line-40 text-28" :class="{'padding-bottom-20': !evaluateData.photos.length}">
					{{evaluateData.content}}
				</view>

				<!-- 图片 -->
				<view class="margin-tb-5" v-if="evaluateData.photos.length">
					<ty-image-images :list="evaluateData.photos"></ty-image-images>
				</view>

				<!-- 用户追评 -->
				<view class="" v-if="isShowAddEvaluate && evaluateData.is_add == 1">
					<!-- 标题 -->
					<text class="text-26 text-main">用户{{evaluateData.add_evaluate_space_day}}天后追评</text>
					<!-- 评论内容 -->
					<view class="margin-top-20 line-40 text-28" :class="{'padding-bottom-20': !evaluateData.add_evaluate_photos.length}">
						{{evaluateData.add_evaluate_content}}
					</view>
					<!-- 图片 -->
					<view class="margin-tb-5" v-if="evaluateData.add_evaluate_photos.length">
						<ty-image-images :list="evaluateData.add_evaluate_photos"></ty-image-images>
					</view>
				</view>

				<!-- 商家回复 -->
				<view class="padding-bottom-20 radius-10" v-if="isShowReply && evaluateData.is_replay == 1">
					<view class="padding-lr-20 padding-top-20 padding-bottom-15 bg-f5">
						<view class="text-28 text-bold text-4d">店铺回复：</view>
						<text class="margin-top-10 line-40 text-24 text-4d">{{evaluateData.replay}}</text>
					</view>
				</view>

				<slot></slot>
			</view>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 评价数据
			evaluateData: {
				type: Object,
				default: {}
			},
			// 是否显示店铺回复
			isShowReply: {
				type: Boolean,
				default: true
			},
			// 是否显示追加评价
			isShowAddEvaluate: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped>

</style>